<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.io.*,org.i_plus.model.*,org.i_plus.model.dao.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gift</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var error = false;
var checkname = false;
function count(data){
	var total = 0;//開始抓總價位
	error=false;//將警告先洗掉
	//抓數量 .count  抓價格 .money
	for(var i=0;i<$(".count").length;i++){
		var temp1 = $(".count:eq("+i+")").val();//每一禮物選取的數量
		$(".error:eq("+i+")").html("");//將警告先洗掉
		if(isNaN(temp1)){//判斷是否數字
			$(".error:eq("+i+")").html("請輸入數字");
			temp1 = "";
			error = true;
		}
		var temp2 = $(".money:eq("+i+")").html();//每一禮物的價格
		total = total+Number(temp1)*Number(temp2);//總價=each 數量*價格
	}
	$("#total").html(total);
}

function send(){
	if(!error){
		for(var i=0;i<$(".count").length;i++){
			if(Number($(".count:eq("+i+")").val())>0 && !error && checkname){
				$.ajax({
					"url":"/i_plus/services/gift_RcdService?"+
					"fromacc="+'${user.account}'+"&"+
					"toacc="+$("#toacc").val()+"&"+
					"giftid="+$(".giftid:eq("+i+")").val()+"&"+
					"gcount="+$(".count:eq("+i+")").val(),
					"type":"POST",
					"dataType":"application/json",
				});
			}				
		}
		$("#success").fancybox().trigger('click');
	}
}

function showname(){
	$("#showname").html($("#toacc").val());
	if($("#toacc").val()=="請選擇您的好友")
		checkname=false;
	else
		checkname=true;
}

$(window).load(function() {
		$.ajax({
			"url":"/i_plus/services/friendService",
			"type":"GET",
			"data":{"fromacc":'${user.account}'},
			"dataType":"text",
			"success":function(data){
				//var json = JSON.parse(data);
				data = data.substr(1,data.length-2);//字串去頭尾 ["temp1","temp2"]=>"temp1","temp2"
				var temp = data.split(",");
				for(var i=0;i<temp.length;i++)
				$("#toacc").append("<option >"+temp[i].substr(1,temp[i].length-2)+"</option>");				
			}
		});
		$("#toacc").append("<option >請選擇您的好友</option>");			
	});
	
function gift_Rcd(){
					$("#searchresult").empty();
					var url = "/i_plus/services/gift_RcdService?"+
					"fromacc="+$("#whosend").val();
					$.getJSON(url, function(data) {	
						$.each(data,function(i,item){//foreach		
						$("#searchresult").append("<tr ><td  align='center'>"+item.giftbean.name+"</td><td align='center'>"+item.toacc+"</td><td align='center'>"+item.gcount+"</td></tr>");
						});//foreach		
					})	;			

}

</script>
<!-- fancybox -->
<script>
			$(window).load(function() {
				$(function(){
				    $('#giftRcd_show').fancybox();
				});
				$(function(){
				    $('#giftCount_show').fancybox();
				});
			});
</script>
<script type="text/javascript" src="<c:url value="/js/fancyboxsource/jquery.mousewheel-3.0.6.pack.js" />"></script>
<link rel="stylesheet" href="<c:url value="/css/fancyboxsource/jquery.fancybox.css" />" type="text/css" media="screen" />
<script type="text/javascript" src="<c:url value="/js/fancyboxsource/jquery.fancybox.pack.js" />"></script>
<link rel="stylesheet" href="<c:url value="/css/fancyboxsource/helpers/jquery.fancybox-buttons.css" />" type="text/css" media="screen" />
<script type="text/javascript" src="<c:url value="/js/fancyboxsource/helpers/jquery.fancybox-buttons.js" />"></script>
<link rel="stylesheet" href="<c:url value="/css/fancyboxsource/helpers/jquery.fancybox-thumbs.css" />" type="text/css" media="screen" />
<script type="text/javascript" src="<c:url value="/js/fancyboxsource/helpers/jquery.fancybox-thumbs.js" />"></script>
<!-- fancybox -->
<!-- 統計特效 -->
<script type="text/javascript">
$(function () {
   var total = 
	$('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '會員購買禮物統計表'
        },
        tooltip: {
    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['禮物',   parseInt('${count[0]}')],
                ['中國娃娃',       parseInt('${count[1]}')],
                {
                    name: '熊熊',
                    y: parseInt('${count[2]}'),
                    sliced: true,
                    selected: true
                },
                ['四葉草',    parseInt('${count[3]}')],
                ['愛心便當',     parseInt('${count[4]}')]
            ]
        }]
    });
});
</script>      	
<!-- 統計特效 -->

</head>
<body style="background-color: #EEEEEE">

<%@ include file="/menu.jsp" %> 



<div >
<form style="margin: 0 auto;width: 600px;">
<h3>GiftTable</h3>
<!-- 管理者 -->
<c:if test="${user.mkind == 'm'}">
<a href="<c:url value="/Manage/Gift.jsp" />" style="text-decoration:none">
   <input type="button" value="禮物管理">
</a>
<a id="giftRcd_show" href="<c:url value="#giftRcd" />" style="text-decoration:none">
	<input type="button" value="送禮紀錄" >
</a>
<a  id="giftCount_show" href="<c:url value="#giftCount" />" style="text-decoration:none">
   <input type="button" value="禮物統計">
</a>
</c:if>
<!-- 管理者 -->
<table id="gifttable"> 
		<tr>
		<th>圖片</th>
		<th>名稱</th>
		<th>增加魅力</th>
		<th>價格</th>
		<th>VIP卷</th>
		<th>購買數量</th>
		</tr>
<c:forEach var="bean"  items="${gift}" varStatus="status">
		<tr height="100">
		<td><img  src="data:${giftpic[status.index] }" width="100" height="100"></td>
         <td>${bean.name }</td>
         <td>${bean.pop }</td>
         <td  class="money" >${bean.gmoney }</td> 
         <td>${bean.vip }</td>
         <td><input type="text"   class="count"  onchange="count(this);"/></td>
         <td><input type="hidden" class="giftid" value="${bean.giftid }"/></td>
         <td class="error"></td>
		</tr>
</c:forEach>
</table>
</form>
</div>
<br><br>
<div style="margin: 0 auto;width: 600px;">
送禮對象:<select id="toacc" onchange="showname();"></select>
總金額:<span id="total" ></span>
<input type="submit" value="確認送禮" onclick="send();"/>
</div>
<!-- hidden -->
<div style="display:none">
<!-- 送禮效果 -->
<div id="success">
<h5>禮物已經送出拉!!</h5>
<span id="showname"></span>的魅力值已經增加!!<br>
</div>
<!-- 送禮效果 -->
<!-- 統計效果 -->
<div id="giftCount" style="width:350px">
<script src="<c:url value="/js/highcharts/highcharts.js" />"></script>
<script src="<c:url value="/js/highcharts/modules/exporting.js" />"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
<!-- 統計效果 -->
<!-- 送禮紀錄 -->
<div id="giftRcd" style="width:350px">
<h3>送禮紀錄</h3>
帳號:<input type="text" id="whosend">
<input type="button" value="查詢" onclick="gift_Rcd();">
<div style="margin:0px auto">
<table >
		<thead>
		<tr>
		<th>禮物名</th>
		<th>送禮對象</th>
		<th>數量</th>
		</tr>
		</thead>
		<tbody id="searchresult">
		</tbody>
</table>
</div>
</div>
<!-- 送禮紀錄 -->
</div>

<!-- hidden -->
</body>
</html>